<script setup lang="ts">
import {onMounted,ref} from "vue";
import {useDeleteWarehouseAPI, useGetAllWarehouseAPI} from "@/apis/warehouse.js";
import router from "@/router/index.js";
import {ElMessage, ElMessageBox} from "element-plus";

interface warehouseInfo{
  id:number,
  name:string,
  address:string,
  phone:string,
  contact:string,
  description:string,
}

// 记住，ref这里是一个类型数组<warehouseInfo[]>
const warehouseList=ref<warehouseInfo[]>([])


onMounted(async () => {
  await useGetAllWarehouseAPI(1,100).then(res=>{
    warehouseList.value=res.data
  })
})
const getWarehouseInfo=async (id:number)=>{
  await router.push({path:`/manage/warehouseDetail/${id}`});
}
const updateWarehouseInfo=async (id:number)=>{
  await router.push({path:`/manage/warehouseUpdate/${id}`});
}

const deleteWarehouse=async (id:number)=>{
  await ElMessageBox.confirm(
      '此操作将删除该仓库, 是否继续?',
      'warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async ()=>{
    await useDeleteWarehouseAPI(id);

    warehouseList.value=warehouseList.value.filter((warehouse:any)=>warehouse.id!==id);
    ElMessage({
      type:'success',
      message: '删除成功!',
    })
  }).catch(()=>{
    ElMessage({
      type: 'info',
      message: '已取消删除',
    })
  })

}


</script>

<template>
  <el-table
      :data="warehouseList"
      style="width: 100%"
      stripe
      border
      max-height="800"
      :default-sort="{prop:'updateTime',order:'descending',}"
  >
    <el-table-column prop="id" fixed label="仓库ID" width="80" />

    <el-table-column prop="name" fixed label="仓库名称" width="230" />

    <el-table-column prop="contact" label="联系人" width="100" />

    <el-table-column prop="phone" label="联系电话" width="135" />

    <el-table-column prop="address" label="仓库地址" width="230" />

    <el-table-column prop="description" label="仓库描述" width="230" />

    <el-table-column  label="操作" width="220" fixed="right">
      <!--  在操作这一栏，添加一个template元素，加一个#default属性，通过这个属性，获取到这一行的数据，是个对象
                   scope：就是el-table表格中被选中的那一行的数据，通过scope获取到该行的数据-->
      <template #default="scope">
        <!--        <el-button size="small" type="warning" plain  @click="router.push({path:`/home/equipment/equipmentDetail/${scope.row.id}`});">详情</el-button>-->
        <el-button size="small" type="warning" plain  @click="getWarehouseInfo(scope.row.id)">详情</el-button>
        <el-button size="small" type="warning" plain  @click="updateWarehouseInfo(scope.row.id)">修改</el-button>
        <el-button size="small" type="warning" plain  @click="deleteWarehouse(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

</template>

<style scoped lang="scss">

</style>